<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #container {
        height: 300px;
        width: 100%;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      const el = document.getElementById('container');
      // 此事件也可以添加到document上，但该事件会有冒泡行为，则本页面上任何位置的粘贴操作都会触发
      el.addEventListener('paste', (e) => {
        let file = null;
        const items = (e.clipboardData || window.clipboardData).items;
        if (items && items.length) {
          for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
              // 如果是image类型存为file
              file = items[i].getAsFile();
              break;
            }
          }
        }
        console.log(file, 'file')
        if (file) {
          let reader = new FileReader();
          reader.onload = function(e) {
            // e.target.result是图片的base64地址
            let img = document.createElement('img');
            img.src = e.target.result;
            el.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      })
    </script>
  </body>
  
</html>